import {Component, EventEmitter, Input, OnDestroy, OnInit, Output} from "@angular/core";
import {CommService} from "../comm-service";
import {SharedService} from "../shared-service";
import * as e from "echarts";
import {MyhttpService} from "../myhttp.service";

@Component({
  template: `
    <div class="clsjxx comp" [style.width]="compw" [style.height]="comph" [style.top]="topv"
         [style.left]="leftv">
      <div class="content">
        <div class="title">
          <div class="title_text">试卷包数量{{comptitle}}</div>
        </div>
        <div class="body">
          <div class="sbid">
            <span>设备ID:</span>
            <span>{{s_zdid}}</span>
          </div>
          <div class="zsitem">
            <div class="fl yingla_div">
              <div class="icon"></div>
              <div class="text">
                <span>应拉试卷</span>&nbsp;&nbsp;
                <span>{{slobj.jh}}</span>
              </div>
            </div>
            <div class="fl shila_div">
              <div class="icon"></div>
              <div class="text">
                <span>实拉试卷</span>&nbsp;&nbsp;
                <span>{{slobj.sj}}</span>
              </div>
            </div>
          </div>
          <div class="zsitem">
            <div class="fl shaola_div">
              <div class="text1">少拉试卷</div>
              <div class="text2">{{slobj.sl}}</div>
            </div>
            <div class="fl duola_div">
              <div class="text1">多拉试卷</div>
              <div class="text2">{{slobj.dl}}</div>
            </div>
            <div class="fl gaojing_div">
              <div class="text1">告警</div>
              <div class="text2">{{slobj.gj}}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  `,
  styles: [
    ".clsjxx{position:absolute;background-color:#fff;border:5px solid #ccc;}",
    ".content{width: calc(100%);height: calc(100%);}",
    ".content>.title{position: relative;width: 100%;height: auto;padding: 10px; border-bottom: 1px solid #ccc; color: rgb(138 143 151);}",
    ".title>.title_text{height: 15px;line-height: 15px;font-size: 15px;  width: auto;border-left: 5px solid #1477F3;padding-left: 10px}",
    ".content>.body{position: relative;width: 100%;height: calc(100% - 24px);padding: 10px 10px}",
    ".sbid{height: 30px;line-height: 30px;text-align: right}",
    ".sbid>span{display: inline-block;padding-left:10px;color: #58AEF4 }",
    ".zsitem{height: calc(50% - 15px);width: 100%}",
    ".yingla_div{margin-left: 8px;margin-bottom: 8px;width: calc(50%  - 8px);height: calc(100% - 8px); background-color: #a9eaf2;color: #666666}",
    ".shila_div{margin-left: 8px;margin-bottom: 8px;width: calc(50%  - 8px);height: calc(100% - 8px);background-color: #cde8ff;color: #666666}",
    ".shaola_div{margin-left: 8px;margin-bottom: 8px;width: calc(33.3%  - 8px);height:calc(100% - 8px);padding: 15px; background-color: #dde593;color:#666666 }",
    ".duola_div{margin-left: 8px;margin-bottom: 8px;width: calc(33.3%  - 8px);height: calc(100% - 8px);padding: 15px;background-color: #f7d39d;color: #666666}",
    ".gaojing_div{margin-left: 8px;margin-bottom: 8px;width: calc(33.3%  - 8px);height: calc(100% - 8px);padding: 15px;background-color: #faa387;color: #666666}",
    ".yingla_div>.icon,.shila_div>.icon{width: 40px;height: 30px;margin: 0px auto;margin-top: 30px; background-image: url('assets/img/sjgz/icon_sjb.png');background-size: 100% 100%;background-repeat: no-repeat}",
    ".yingla_div>.text,.shila_div>.text{height: 50px;line-height: 50px;text-align: center}",
    ".text1{height: 50px;line-height:50px;text-align: center}",
    ".text2{height: 38px;line-height:38px;text-align: center}"
  ]
})
export class YwclClsjxxComponent implements OnInit, OnDestroy {
  compw: string = "0px";
  comph: string = "0px";
  topv: string = "0px";
  leftv: string = "0px";
  comptitle: string = "";
  s_zdid: string = "";
  frompage: string;
  lockid: any;
  intervalnum: number = 10 * 60 * 1000;

  slobj: any = {
    jh: 0,
    sj: 0,
    dl: 0,
    sl: 0,
    gj: 0
  };

  /**
   *
   * @param activezdobj
   * activezdobj ---activezdobj
   * sszdxx {
   *  sfbd:  是否比对，0 不比对；1 比对
   *  sbbqidList:  实时上报的标签
   * }
   */
  handertj(activezdobj: any, sszdxx: any): void {
    const sjbsl_jh = activezdobj.gldzbqidList;  // 计划拉的标签id列表
    const sbjsl_ss = sszdxx.sbbqidList; // 实时上报的标签id列表
    const sfbdv = sszdxx.sfbd;
    let sjbsl_sl: number = 0; // 少拉
    let sjbsl_dl: number = 0; //多拉
    if (sfbdv == "1") {
      // 比对
      //少拉
      const sllist = sjbsl_jh.filter((id) => {
        return sbjsl_ss.indexOf(id) == -1;
      });
      sjbsl_sl = sllist.length;
      //多拉
      const dllist = sbjsl_ss.filter((id) => {
        return sjbsl_jh.indexOf(id) == -1;
      });
      sjbsl_dl = dllist.length;
    }
    this.slobj.jh = sjbsl_jh.length;
    this.slobj.sj = sbjsl_ss.length;
    this.slobj.dl = sjbsl_dl;
    this.slobj.sl = sjbsl_sl;
  }

  /**
   * 实时请求获取告警数量
   */
  getgjsl(): void {
    if (!this.s_zdid) {
      return
    }
    const url = "sjgz/zsymyycl/cxyyclbjsl";
    this.itservice.kwPtPost(url, {
      sbid: this.s_zdid
    }).subscribe(resp => {
      this.commservice.handResponse("get", url, resp, (arg1, resp, arg2) => {
        if (arg1) {
          if (arg2) {
            const bjxxsl = resp.bjxxsl ? resp.bjxxsl : 0;
            this.slobj.gj = bjxxsl;
          }
        }
      });
    });
  }

  /**
   * 组件在 显示面板中的位置+ 大小
   */
  initcompPositionSize_ctrshow(): void {
    // 位置 大小
    this.compw = this.o.compw + "px";
    this.comph = this.o.comph + "px";
    this.topv = this.o.topv + "px";
    this.leftv = this.o.leftv + "px";
    // 显示
    this.frompage = this.o.frompage;
    if (this.frompage === "ywcl") {
      this.s_zdid = "";
      this.getgjsl();
      this.lockid = setInterval(() => {
        this.getgjsl();
      }, this.intervalnum);
    }
  }


  @Input() o: any;
  @Output() outhander: EventEmitter<any> = new EventEmitter();

  constructor(private commservice: CommService,
              private itservice: MyhttpService,
              private sharedService: SharedService) {
    this.sharedService.changeEmitted$.subscribe(resp => {
      const actiontype = resp.actiontype;
      const data = resp.data;
      if (actiontype == "toggleActiveZd") {
        const activeZdobj = data.activezdobj;
        const ssbqidxxv = data.ssbqidxx;  //实时扫描到的标签id
        if (activeZdobj) {
          this.comptitle = `(${activeZdobj.zdmc})`;
          this.s_zdid = activeZdobj.id;
          this.handertj(activeZdobj, ssbqidxxv);
        }
      }
    });
  }

  ngOnInit() {
    this.commservice.log("-- 【 compkey=clsjxx】--被父组件动态加载init....", this.o);
    this.initcompPositionSize_ctrshow();
  }

  ngOnDestroy() {
    if (this.lockid) {
      clearInterval(this.lockid);
    }
  }

}
